<template>
  <section class="single-service-area">
    <header class="header-area">
      <div class="main-header">
        <div class="container">
          <div class="row">
            <div class="col-lg-12" style="width: 100%;">
              <div
                class="main-header-item d-flex justify-content-between align-items-center"
              >
                <div class="main-header-menus  d-flex">
                  <div class="logo" style="height: 10px">
                    <a href="/"
                      ><img
                        style="height: 70px"
                        src="/assets/images/logo.png"
                        alt=""
                    /></a>
                  </div>

                  <div class="header-menu d-none d-lg-block">
                    <ul>
                      <li>
                        <a class="active" @click="$router.push('/')">首页</a>
                      </li>
                      <li>
                        <a href="#" @click="$router.push('/search')"
                          >信息智能处理</a
                        >
                        <ul class="sub-menu">
                          <li>
                            <nuxt-link to="/search">信息处理详情</nuxt-link>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#" @click="$router.push('/single-service')"
                          >智能处理样理展示</a
                        >
                        <ul class="sub-menu">
                          <li>
                            <nuxt-link to="/single-service">样例展示</nuxt-link>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#" @click="$router.push('/authors')"
                          >经典作者介紹</a
                        >
                        <ul class="sub-menu">
                          <li><nuxt-link to="/authors">作者介绍</nuxt-link></li>
                          <li>
                            <nuxt-link to="/single-author">作者详情</nuxt-link>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#" @click="$router.push('/hist')"
                          >查看历史记录</a
                        >
                        <ul class="sub-menu">
                          <nuxt-link to="/login">去登陆</nuxt-link>
                        </ul>
                      </li>
                      <li>
                        <a v-if="!username" @click="$router.push('login')"
                          >去登陆</a
                        >
                        <span v-else>{{ username }}</span>
                      </li>
                      <li>
                        <a v-if="username" @click="Esc()">退出</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-4 col-md-7 col-sm-9 order-lg-1 order-2">
          <div class="service-sidebar mt-30">
            <div class="service-sidebar-list">
              <ul>
                <li>
                  <nuxt-link to="/single-service-3">
                    郑伯克段于鄢-左丘明
                  </nuxt-link>
                </li>
                <li>
                  <nuxt-link to="/single-service-4">
                    史记-单篇
                  </nuxt-link>
                </li>
                <li>
                  <nuxt-link to="">
                    三国志-单篇
                  </nuxt-link>
                </li>
                <li>
                  <nuxt-link to="">
                    资治通鉴-单篇
                  </nuxt-link>
                </li>
                <li>
                  <nuxt-link to="/single-service">
                    赤壁赋-苏轼
                  </nuxt-link>
                </li>

                <li>
                  <nuxt-link to="/single-service-2">
                    上林赋-司马相如
                  </nuxt-link>
                </li>
              </ul>
            </div>
            <div class="service-sidebar-help"></div>
          </div>
        </div>
        <div class="col-lg-8 order-lg-2 order-1">
          <div class="single-project mt-30">
            <div class="single-project-thumb"></div>
            <div class="single-project-content">
              <h3 class="title">《史記》</h3>
              <p>
                壬戌之秋，七月既望，蘇子與客泛舟遊於赤壁之下。清風徐來，水波不興，舉酒屬客，誦明月之詩，歌窈窕之章。少焉，月出於東山之上，徘徊於斗牛之間，白露橫江，水光接天；縱一葦之所如，凌萬頃之茫然。浩浩乎如馮虛御風，而不知其所止；飄飄乎如遺世獨立，羽化而登仙。
                於是飲酒樂甚，扣舷而歌之。歌曰：「桂棹兮蘭槳，擊空明兮泝流光。渺渺兮予懷，望美人兮天一方。」客有吹洞簫者，倚歌而和之，其聲嗚嗚然，如怨如慕，如泣如訴，餘音嫋嫋，不絕如縷。舞幽壑之潛蛟，泣孤舟之嫠婦。
                蘇子愀然，正襟危坐，而問客曰：「何為其然也？」
                客曰：「『月明星稀，烏鵲南飛』，此非曹孟德之詩乎？西望夏口，東望武昌，山川相繆，鬱乎蒼蒼，此非孟德之困於周郎者乎？方其破荊州，下江陵，順流而東也，舳艫千里，旌旗蔽空，釃酒臨江，橫槊賦詩，固一世之雄也，而今安在哉？況吾與子，漁樵於江渚之上，侶魚蝦而友麋鹿；駕一葉之扁舟，擧匏樽以相屬。寄蜉蝣於天地，渺滄海之一粟。哀吾生之須臾，羨長江之無窮。挾飛仙以遨遊，抱明月而長終。知不可乎驟得，託遺響於悲風。」
                蘇子曰：「客亦知夫水與月乎？逝者如斯，而未嘗往也；盈虛者如彼，而卒莫消長也，蓋將自其變者而觀之，則天地曾不能以一瞬；自其不變者而觀之，則物與我皆無盡也，而又何羨乎？且夫天地之間，物各有主，苟非吾之所有，雖一毫而莫取。惟江上之清風，與山間之明月，耳得之而為聲，目遇之而成色，取之無禁，用之不竭，是造物者之無盡藏也，而吾與子之所共適。」
                客喜而笑，洗盞更酌。肴核既盡，杯盤狼籍，相與枕藉乎舟中，不知東方之既白。
              </p>
            </div>
            <div class="row">
              <div class="col-lg-6 col-md-6"></div>
              <div class="col-lg-6 col-md-6"></div>
            </div>
            <div class="single-project-text">
              <a class="main-btn mt-55" href="#">下载</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  mounted() {
    let userName = JSON.parse(localStorage.getItem("user"));
    if (userName) {
      //userName.username==user.username  对应登录界面设置的key里面的value对应的数组值
      this.username = userName.username;
    }
  },
  methods: {
    Esc() {
      this.username = "";
      console.log("登出");
      localStorage.clear();

      this.$router.push("/");
    }
  },
  data() {
    return {
      username: "",
      title: "NLP | 左传"
    };
  }
};
</script>
